import React, { useState } from 'react';
import { Spin,Card,Input,Icon, Button, message } from "antd";
import '../../styles/pages/login.css';
import servicePath from '../../config/apiUrl'
import axios from 'axios'

const Login = (props)=>{
    const [isLoading,setIsLoading] = useState(false)
    const [userName,setUserName] = useState("")
    const [password,setPassword] = useState("")
    const submit = ()=>{
        setIsLoading(true)
        axios({
            method:"post",
            data:{
                "userName":userName,
                "password":password
            }, 
            header:{ 'Access-Control-Allow-Origin':'*' },
            withCredentials: true,
            url:servicePath.checkLogin
        }).then(
            res=>{
                setIsLoading(false);
                if(res.data.resultCode === 1){
                    props.history.push("/article")
                }else{
                    message.error(res.data.msg)
                }
            }
        ).catch(err=>{
            setIsLoading(false);
        })
    }
    return (<div className="login_div">
        <Spin spinning={isLoading}>
            <Card title="blog_admin login" style={{width:400}}>
                <Input
                    size="large"
                    type="text"
                    style={{margin:'10px 0'}}
                    allowClear={true}
                    prefix={<Icon type="user" style={{color:'rgba(20,20,20,.25)'}}/>}
                    placeholder="Enter in userName"
                    value={userName}
                    onChange={e=>setUserName(e.target.value)}
                />
                <Input.Password
                    size="large"
                    style={{margin:'10px 0'}}
                    prefix={<Icon type="lock" style={{color:'rgba(20,20,20,.25)'}}/>}
                    placeholder="Enter in password"
                    value={password}
                    onChange={e=>setPassword(e.target.value)}
                />
                <Button size="large" style={{width:'100%'}} type="primary" onClick={()=>submit()} >登录</Button>
            </Card>
        </Spin>
    </div>)
}
export default Login